<template>
    <div class="page-bridal-shop">
        <!-- <div v-if="shopDetail" class="select-bridal-box primary-bg-color white-color">
            <div class="title" @click="reverseOptionsVisible">
                <span class="icon">&#xe628;&nbsp;</span>
                <span class="text-normal">{{shopDetail ? shopDetail.name : ''}}</span>
                <span class="icon arrow" :class="{ 'invert': optionsVisible }">&nbsp;&#xe60b;</span>
            </div>
            <div class="options-box" v-show="optionsVisible">
                <div class="item text-normal"
                    :class="{'active': shopDetail.id === item.id}"
                    v-for="(item, index) in shopList"
                    :key="index"
                    @click="onClickOption(item)">
                    {{item.name}}
                </div>
            </div>
        </div> -->
        <!-- <Banner v-if="shopBanner && shopBanner.length" :banners="shopBanner" /> -->
        <div class="shop-info-box">
            <div class="banner-box">
                <div class="inner-bg" v-if="(shopBanner && shopBanner.length) || (shopDetail && shopDetail.video)"></div>
                <div class="inner clearfix">
                    <div class="swipper white-bg" v-if="(shopBanner && shopBanner.length) || (shopDetail && shopDetail.video)">
                        <VideoBanner v-if="shopDetail"
                            @banner="onClickBanner"
                            :heightAuto="true"
                            :video="shopDetail.video"
                            :images="shopBanner"/>
                    </div>
                    <!-- <wx-swiper
                        v-if="shopBanner && shopBanner.length"
                        class="swipper white-bg"
                        autoplay="true"
                        interval="3000"
                        duration="1000"
                        circular="true">
                        <wx-swiper-item class="swiper-item" v-if="shopDetail.video">
                            <video class="swiper-image" :poster="poster" :src="shopDetail.video" :controls="true" object-fit="cover"></video>
                        </wx-swiper-item>
                        <wx-swiper-item class="swiper-item" @click="onClickBanner(item)" v-for="(item, index) in shopBanner" :key="index">
                            <img class="swiper-image" :src="item.image" mode="aspectFill" />
                        </wx-swiper-item>
                    </wx-swiper> -->
                    <div class="white-bg desc-box" v-if="shopDetail">
                        <div class="text-center black-color font-bold title text-normal">品牌介绍</div>
                        <div class="content text-normal color-font-2" v-html="shopDetail.description">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <TabBox :tabs="tabs" :pad-lg="false" />

        <!-- 套系列表 -->
        <div v-if="samples.length > 0">
            <div class="inner-pad">
                <LineTitle value="套系精选" :hasPad="true" />
            </div>
            <PkgSampleItem v-for="(sample, index) in samples"
                :key="index"
                :cover="sample.selected_cover ? sample.selected_cover : sample.cover[0]"
                :name="sample.name"
                :price="sample.price"
                :read-number="sample.visitor || 0"
                :share-number="sample.share_number || 0"
                @click="onClickSample(sample)">
            </PkgSampleItem>
        </div>
        <ListEmpty v-else />
    </div>
</template>

<script lang="ts">
import {
    api,
} from '@/lib/api';
import store from '@/store';
import LineTitle from '@/components/common/lineTitle.vue';
import Banner from '@/components/common/banner.vue';
import TabBox from '@/components/common/tabBox.vue';
import PkgSampleItem from '@/features/pkg/sampleItem.vue';
import ListEmpty from '@/components/list/listEmpty.vue';
import VideoBanner from '@/components/common/videoBanner.vue';

import {
    getVideoPoster,
} from '@/lib/utils';
import { Component, Vue } from 'vue-property-decorator';
import { Route } from 'vue-router';
import { ROUTE_NAME } from '@/lib/constant';

/**
 * 店铺详情
 */
@Component({
    name: 'ShopBridal',
    components: {
        LineTitle,
        Banner,
        TabBox,
        PkgSampleItem,
        ListEmpty,
        VideoBanner,
    },
})
export default class ShopBridal extends Vue {
    public item: any = null;

    // optionsVisible: false,
    // selectedShop: null,

    /** 店铺id */
    public get shopId() {
        return this.$route.params.shopId;
    }
    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }

    /** 服务信息 */
    public get service() {
        return store.state.utils.service;
    }

    /** 店铺列表 */
    // bridalShopList: state => state.bridalShopList,
    // shopMap: state => state.shopMap,
    public get shopDetailMap() {
        return store.state.shop.shopDetailMap;
    }

    /** banners */
    public get bannersMap() {
        return store.state.shop.banners;
    }

    /** 套系精选 */
    public get samplesMap() {
        return store.state.shop.samples;
    }

    public get tabs() {
        const name = ROUTE_NAME.SHOP_CATEGORY;
        const shopId = this.shopId;
        return [
            {
                png: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/icon/bridal.png',
                text: '婚纱照',
                to: { name, params: { shopId }, query: { type: '婚纱照' , mode: 'bridal' } },
            },
            {
                png: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/icon/fasion.png',
                text: '时尚写真',
                to: { name, params: { shopId }, query: { type: '时尚写真' , mode: 'bridal' } },
            },
            {
                png: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/icon/family.png',
                text: '全家福',
                to: { name, params: { shopId }, query: { type: '全家福' , mode: 'bridal' } },
            },
            {
                png: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/icon/pregnant.png',
                text: '孕妇摄影',
                to: { name, params: { shopId }, query: { type: '孕妇摄影' , mode: 'bridal' } },
            },
            {
                png: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/icon/child.png',
                text: '儿童摄影',
                to: { name, params: { shopId }, query: { type: '儿童摄影' , mode: 'bridal' } },
            },
        ];
    }

    /** 店铺列表 */
    // shopList() {
    //     return this.bridalShopList.map((item) => {
    //         return this.shopMap[item];
    //     });
    // },
    /** 店铺详情 */
    public get shopDetail() {
        return this.shopDetailMap[this.shopId] || null;
    }

    /** 店铺banner */
    public get shopBanner() {
        return this.bannersMap[this.shopId] || null;
    }

    /** 套系精选 */
    public get samples() {
        return this.samplesMap[this.shopId] || [];
    }

    public get poster() {
        return this.shopDetail && this.shopDetail.video ? getVideoPoster(this.shopDetail.video) : '';
    }

    // reverseOptionsVisible() {
    //     this.optionsVisible = !this.optionsVisible;
    // },
    // /**
    //  * 点击左上角的按钮
    //  */
    // onClickOption(item) {
    //     if (this.shopDetail.id !== item.id) {
    //         this.shopId = item.id;
    //     }
    //     this.reverseOptionsVisible();
    // },
    public onClickBanner(item: Shop.Banner) {
        if (item.url) {
            // wx.navigateTo({
            //     url: `/pages/web/main?src=${item.url}`,
            // });
            api.push({
                name: ROUTE_NAME.UTILS_WEB,
                query: {
                    src: item.url,
                },
            });
        } else if (item.aim === 'package') {
            // api.navigateTo({
            //     url: '/pages/pkg_detail/main',
            //     query: {
            //         pkg_id: item.link_id,
            //     },
            // });
            api.push({
                name: ROUTE_NAME.PKG_DETAIL,
                params: {
                    pkgId: item.link_id + '',
                },
            });
        } else if (item.aim === 'good') {
            // api.navigateTo({
            //     url: '/pages/product_detail/main',
            //     query: {
            //         product_id: item.link_id,
            //     },
            // });
            api.push({
                name: ROUTE_NAME.PRODUCT_DETAIL,
                params: {
                    productId: item.link_id + '',
                },
            });
        }
    }

    public async getShopDetail(shopId: any) {
        store.commit('utils/startRequest');
        await Promise.all([
            store.dispatch('shop/getShopDetail', {
                shopId,
            }),
            store.dispatch('shop/getBanners', {
                shopId,
            }),
            store.dispatch('shop/getSamples', {
                shopId,
            }),
        ]);
        store.commit('utils/endRequest');
    }

    /**
     * 点击sample
     */
    public onClickSample(sample: any) {
        // api.navigateTo({
        //     url: '/pages/pkg_detail/main',
        //     query: {
        //         shop_id: this.shopId,
        //         pkg_id: sample.id,
        //     },
        // });

        api.navigateTo({
            url: '/pages/main/index',
            query: {
                type: 'jump',
                targeturl: this.$router.resolve({
                    name: ROUTE_NAME.PKG_DETAIL,
                    params: {
                        pkgId: sample.id,
                    },
                }).route.fullPath,
            },
        });
    }

    public async beforeRouteEnter(to: Route, from: Route, next: any) {
        const shopId = to.params.shopId;
        await Promise.all([
            store.dispatch('utils/getPageConfig'),
        ]);
        next();
    }
    public async created() {
        await this.getShopDetail(this.shopId);
        wx.setNavigationBarTitle({
            title: this.shopDetail.name,
        });

        window.onShareAppMessage = (data) => {
            // return {
            //     title: this.shopDetail.name,
            //     imageUrl: '',
            //     path: `/pages/shop_bridal/main?shop_id=${this.shopId}&referrer_id=${this.userBasicInfo.id}`,
            // };

            const url = this.$router.resolve({
                name: ROUTE_NAME.SHOP_BRIDAL,
                params: {
                    shopId: this.shopId,
                },
                query: {
                    referrer: this.userBasicInfo.id + '',
                },
            }).route.fullPath;

            return {
                title: this.shopDetail.name,
                imageUrl: '',
                // path: `/pages/index/main?referrer_id=${this.userBasicInfo.id}`,
                miniprogramPath: `/pages/main/index?type=share&targeturl=${encodeURIComponent(url)}`, // 如果需要分享原始小程序页面路由，可传递此参数
            };
        };
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-bridal-shop {
    background-color: #F7F8FA;
    .select-bridal-box {
        position: relative;
        padding: 0 10px;
        .title {
            .arrow {
                display: inline-block;
                margin-left: 10rpx;
                vertical-align: -4rpx;
                transition: transform .3s;
            }
            .invert {
                transform-origin: center;
                transform: rotateZ(180deg);
            }
        }
        .options-box {
            position: absolute;
            z-index: 1;
            top: 60rpx;
            left: 60rpx;
            padding: 0 10rpx;
            color: @black-color;
            background: @white-color;
            border-radius: 14rpx;
            text-align: center;
            box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
            .item {
                padding: 14rpx 10px;
                &:not(:last-child) {
                    border-bottom: 2rpx solid @grey-line-color;
                }
                &.active {
                    color: @primary-color;
                }
            }
        }
    }
    .inner-pad {
        padding: 0rpx 32rpx;
    }
    .banner-box {
        position: relative;
        border-radius: 8rpx;
        .inner-bg {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 136px;
            background: @primary-color;
            z-index: 0;
        }
        .inner {
            box-sizing: border-box;
            // padding: 10px 0;
            padding: 10px 32rpx;
            .swipper {
                margin-left: 50%;
                transform: translateX(-50%);
                width: 100%;
                height: 160px;
                border-radius: 8rpx 8rpx 0 0;
                // box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
                overflow: hidden;
                .swiper-item {
                    border-radius: 8rpx 8rpx 0 0;
                    .swiper-image {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        .desc-box {
            padding: 16rpx 24rpx;
            color: #666;
            .title {
                margin-bottom: 8rpx;
            }
        }
    }
}

</style>
